<template>
  <div class="About">
    <el-row>
      <el-col :span="24"> <p class="title">标签设置</p></el-col>
    </el-row>
    <el-row class="searchAndTag">
      <el-col :span="14"> <div class="data">设置首页标签属性</div> </el-col>
      <el-col :span="10">
        <span class="button">新增</span>
        <span class="screen">筛选：</span>
        <input class="search" type="text" />
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="name" label="名称"> </el-table-column>
      <el-table-column label="图标">
        <template slot-scope="scope">
          <img class="icon" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img class="icon" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="discount" label="折扣"> </el-table-column>
      <el-table-column prop="commission" label="佣金"> </el-table-column>
      <el-table-column prop="relation" label="关联视类别"> </el-table-column>
      <el-table-column prop="uptime" label="更新时间"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      tableData: [
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
        {
          name: "KTV",
          icon: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          img: "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          discount: "9折",
          commission: "20%",
          relation: "KTV分类",
          uptime: "2022年1月1日",
          status: 0,
        },
      ],
    };
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.About {
  .title {
    font-size: 20px;
    color: #666;
  }
  .data {
    font-size: 14px;
    color: #999;
  }
  .searchAndTag {
    padding: 20px 0;
    align-items: center;
  }
  .button {
    padding: 2px 26px;
    background-image: linear-gradient(to right, #76c6e9, #17b1f9);
    border-radius: 20px;
    color: #fff;
  }
  .search {
    border-radius: 20px;
    width: 400px;
    outline: none;
    border: 1px solid #999;
    height: 24px;
  }
  .screen {
    padding: 0 20px;
  }
  .icon,
  .img {
    width: 30px;
    height: 30px;
  }
  ::v-deep .el-table__cell {
    border-bottom: 2px solid #a6e3df;
  }
  ::v-deep .el-table__row:last-child {
    .el-table__cell {
      border: none;
    }
  }
}
</style>